<template>
  <div class="book-list">
    <h2>图书列表</h2>
    <!-- 搜索功能区域 -->
    <div class="actions">
      <!-- 下拉选择框移动到搜索栏左侧 -->
      <el-select v-model="search.bookArea" placeholder="选择区位" style="width: 150px; margin-right: 10px" @change="fetchBooks">
        <el-option label="全部" :value="null" />
        <el-option v-for="area in areas" :key="area.areaCodeId" :label="area.areaName" :value="area.areaName" />
      </el-select>
      <el-select v-model="search.bookType" placeholder="选择类型" style="width: 150px; margin-right: 10px" @change="fetchBooks">
        <el-option label="全部" :value="null" />
        <el-option v-for="type in bookTypes" :key="type.typeId" :label="type.typeName" :value="type.typeName" />
      </el-select>
      <el-select v-model="search.bookStatus" placeholder="选择状态" style="width: 150px; margin-right: 10px" @change="fetchBooks">
        <el-option label="全部" :value="null" />
        <el-option label="已借出" value="已借出" />
        <el-option label="可借" value="可借" />
        <el-option label="不可借" value="不可借" />
      </el-select>
      <el-input v-model="search.bookNumber" placeholder="输入图书编号搜索" style="width: 200px; margin-right: 10px" />
      <el-input v-model="search.bookName" placeholder="输入图书名称搜索" style="width: 200px; margin-right: 10px" />
      <el-input v-model="search.bookAuthor" placeholder="输入作者搜索" style="width: 200px; margin-right: 10px" />
      <el-button type="primary" @click="fetchBooks">搜索</el-button>
    </div>

    <!-- 图书卡片显示 -->
    <el-row :gutter="20">
      <el-col :span="6" v-for="(book, index) in bookData.content" :key="index">
        <el-card :body-style="{ padding: '20px' }" class="recommend-book-card" @click="viewBookDetail(book.bookNumber)">
          <div class="book-cover-container">
            <el-image :src="getImageUrl(book.bookCover)" alt="封面" class="book-cover" />
          </div>
          <el-link class="book-name">{{ book.bookName }}</el-link>
          <p class="author">作者: {{ book.bookAuthor }}</p>
          <el-text class="description">{{ book.bookDescription }}</el-text>
        </el-card>
      </el-col>
    </el-row>

    <!-- 分页组件 -->
    <div class="pagination-actions">
      <el-pagination
        background
        layout="prev, pager, next, sizes, jumper"
        :total="bookData.totalElements"
        :page-size="pagination.size"
        v-model:current-page="pagination.page"
        @update:current-page="fetchBooks"
        @size-change="handleSizeChange"
      />
    </div>
  </div>
</template>

<script setup>
</script>

<style scoped>
/* ... existing code ... */
/* 推荐书籍卡片样式 */
.recommend-book-card {
  cursor: pointer;
  transition: transform 0.2s;
}

.recommend-book-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.recommend-book-card .book-cover-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 150px; /* 设置封面图片的固定高度 */
}

.recommend-book-card .book-cover {
  max-width: 100%;
  height: 100%; /* 使图片高度占满容器 */
  object-fit: contain; /* 保持图片比例，完全显示 */
  border-radius: 4px; /* 添加圆角 */
}

.recommend-book-card .book-name {
  font-size: 18px;
  margin-top: 10px;
}

.recommend-book-card .author {
  font-size: 14px;
  color: #666;
}

.recommend-book-card .description {
  font-size: 14px;
  color: #999;
}

/* ... existing code ... */
</style>